<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><a href="#"><img src="images/01.jpg" alt=""/ ></a></li>
				<li><a href="#"><img src="images/02.jpg"  alt=""/></a></li>
				<li><a href="#"><img src="images/03.jpg" alt=""/ ></a></li>
			</ul>
		</div>
		<script type="text/javascript">
			var wrap = document.querySelector(".wrap")
			var li1 = document.querySelectorAll("li")[0]
			var li2 = document.querySelectorAll("li")[1]
			var li3 = document.querySelectorAll("li")[2]
			wrap.onmouseenter = function(){
				li1.style.opacity = "0.4"
				li2.style.opacity = "0.4"
				li3.style.opacity = "0.4"
			}
			wrap.onmouseleave = function(){
				li1.style.opacity = "1"
				li2.style.opacity = "1"
				li3.style.opacity = "1"
			}
			li1.onmouseenter = function(){
				this.style.opacity = "1"
				li2.style.opacity = "0.4"
				li3.style.opacity = "0.4"
			li2.onmouseenter = function(){
				this.style.opacity = "1"
				li1.style.opacity = "0.4"
				li3.style.opacity = "0.4"
			}
			li3.onmouseenter = function(){
				this.style.opacity = "1"
				li1.style.opacity = "0.4"
				li2.style.opacity = "0.4"
			}
		</script>
	</body>
</html>
